<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>个人简历</title>
		<link rel="stylesheet" href="./libs/bootStrap/css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="libs/fontawesome-free-6.1.1-web/css/all.css" />
		<style type="text/css">
			*,
			p {
				padding: 0;
				margin: 0;
			}

			td,
			body {
				font-family: "微软雅黑", "Helvetica Neue", Arial, sans-serif;
				font-size: 14px;
			}

			.mess {
				border: red 1px solid;
			}

			.introduceDetail {
				color: rgb(199, 21, 133);
			}

			.cardBorder {
				border: none;
			}

			.table {
				/* border: 1px solid rgb(242,222,222); */
				margin-bottom: 0;
			}

			.messageUnderline {
				border-bottom: dotted;
			}

			i,
			a {
				color: #000000;
				width: 10px;
			}

			a:hover {
				text-decoration: none;
				/* 去除默认的下划线 */
				outline: none;
				/* 去除旧版浏览器的点击后的外虚线框 */
				color: deeppink;
				/* 去除默认的颜色和点击后变化的颜色 */
			}

			.imgDetail>img {
				width: 45%;
				height: 45%;
			}
		</style>
	</head>
	<body class="pt-3 pb-3">
		<div class="container">
			<div class="row">
				<div class="col-3 ">
					<!-- 个人信息开始 -->
					<div class="card">
						<div class="card-header" style="background-color: rgb(245,245,245);">
							个人信息
						</div>
						<div class="card-body">
							<figure class="figure">
								<img src="images/header.jpg" class="figure-img img-fluid rounded img-thumbnail" alt="...">
								<div class="ml-4">
									<figcaption class="figure-caption mt-2"><i class="fa-solid fa-signature"></i><span
											class="messageUnderline ml-3"><strong>江&emsp;山</strong></span>
									</figcaption>
									<figcaption class="figure-caption mt-2"><i
											class="fa-solid fa-graduation-cap"></i><span
											class="messageUnderline ml-3">四川轻化工大学</span>
									</figcaption>
									<figcaption class="figure-caption mt-2"><i class="fa-solid fa-microchip"></i><span
											class="messageUnderline ml-3">计算机科学与技术</span>
									</figcaption>
									<figcaption class="figure-caption mt-2"><i class="fa-solid fa-house"></i><span
											class="messageUnderline ml-3">四川省南充市</span>
									</figcaption>
									<figcaption class="figure-caption mt-2"><i class="fa-solid fa-file-lines"></i><span
											class="messageUnderline ml-3">邮政编码</span><span
											class="badge badge-secondary ml-1">637668</span>
									</figcaption>
									<figcaption class="figure-caption mt-2"><i
											class="fa-solid fa-mobile-screen-button"></i><span
											class="messageUnderline ml-3">15298231317</span>
									</figcaption>
									<figcaption class="figure-caption mt-2"><i class="fa-solid fa-envelope"></i><span
											class="messageUnderline ml-3"><a
												href="https://mail.qq.com">1531789440@qq.com</a></span>
									</figcaption>
								</div>
							</figure>
						</div>
					</div>
					<!-- 个人信息结束 -->
					<!-- 个人技能开始 -->
					<div class="card mt-4">
						<div class="card-header" style="background-color: rgb(217,237,247);">
							个人技能
						</div>
						<table class="table table-borderless mt-2">
							<tbody>
								<tr>
									<td>
										<div class="row">
											<div class="col-4">
												HTML5
											</div>
											<div class="col-8">
												<div class="progress">
													<div class="progress-bar progress-bar-striped progress-bar-animated bg-success"
														role="progressbar" aria-valuenow="75" aria-valuemin="0"
														aria-valuemax="100" style="width: 90%"></div>
												</div>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<div class="row">
											<div class="col-4">
												CSS3
											</div>
											<div class="col-8">
												<div class="progress">
													<div class="progress-bar progress-bar-striped progress-bar-animated bg-info"
														role="progressbar" aria-valuenow="75" aria-valuemin="0"
														aria-valuemax="100" style="width: 85%"></div>
												</div>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<div class="row">
											<div class="col-4">
												JQuery
											</div>
											<div class="col-8">
												<div class="progress">
													<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger"
														role="progressbar" aria-valuenow="75" aria-valuemin="0"
														aria-valuemax="100" style="width: 80%"></div>
												</div>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<div class="row">
											<div class="col-4">
												JS
											</div>
											<div class="col-8">
												<div class="progress">
													<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning"
														role="progressbar" aria-valuenow="75" aria-valuemin="0"
														aria-valuemax="100" style="width: 60%"></div>
												</div>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<div class="row">
											<div class="col-4">
												Vue
											</div>
											<div class="col-8">
												<div class="progress">
													<div class="progress-bar progress-bar-striped progress-bar-animated"
														role="progressbar" aria-valuenow="75" aria-valuemin="0"
														aria-valuemax="100" style="width: 70%"></div>
												</div>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<div class="row">
											<div class="col-4">
												Django
											</div>
											<div class="col-8">
												<div class="progress">
													<div class="progress-bar progress-bar-striped progress-bar-animated bg-secondary"
														role="progressbar" aria-valuenow="75" aria-valuemin="0"
														aria-valuemax="100" style="width: 75%"></div>
												</div>
											</div>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<!-- 个人技能结束 -->
				</div>
				<div class="col-9 mb-5">
					<!-- 文字介绍开始 -->
					<div class="jumbotron jumbotron-fluid">
						<h5 class="ml-3 pb-5"><em>学习经历</em></h5>
						<div class="container text-right">
							<p>熟练使用<span class="introduceDetail">HTML5、CSS3</span>相关弹性布局flex，动画animation、过渡transition等操作
							</p>
							<p>会运用<span class="introduceDetail">Vue</span>主流框架，掌握<span
									class="introduceDetail">Bootstrap、Element、Layui</span>等UI开源框架</p>
							<p>能使用<span class="introduceDetail">JQuery、JavaScript</span>编写相关逻辑代码，实现对应功能</p>
							<p>能运用<span class="introduceDetail">Django</span>进行Web开发，并融合相关前端框架实现相关系统</p>
							<p>做过移动端<span class="introduceDetail">微信小程序</span>的相关项目</p>
							<p>爱好程序设计、喜欢开发自己的小型产品</p>
							<p>有良好的编程习惯，以及程序错误控制和解决能力</p>
						</div>
					</div>
					<!-- 文字介绍结束 -->
					<!-- 项目展示开始 -->
					<div class="card">
						<div class="card-header" style="background-color: rgb(217,237,247);">
							项目展示
						</div>
						<div class="card-body d-flex justify-content-between imgDetail">
							<img src="images/carmall.png" class="img-thumbnail img-fluid">
							<img src="images/apple.png" class="img-thumbnail img-fluid">
						</div>
						<div class="d-flex justify-content-around pb-3">
							<span>基于Django+Bootstrap的汽车商城</span>
							<span>基于Vue-cli的vue+webpack苹果配件页面</span>
						</div>
					</div>
					<!-- 项目展示结束 -->
					<!-- 工作经验开始 -->
					<!-- 					<div class="card mt-4 cardBorder">
						<div class="card-header" style="background-color: rgb(242,222,222);">
							工作经验
						</div>
						<table class="table" style="border:1px solid rgb(242,222,222);">
							<tbody>
								<tr>
									<td>2010-2015</td>
									<td>XX公司</td>
									<td>前端工程师</td>
								</tr>
								<tr>
									<td>2016-2019</td>
									<td>XX公司</td>
									<td>前端工程师</td>
								</tr>
								<tr>
									<td>2021-至今</td>
									<td>XX公司</td>
									<td>前端工程师</td>
								</tr>
							</tbody>
						</table>
					</div> -->
					<!-- 工作经验结束 -->
					<!-- 教育背景开始 -->
					<div class="card mt-4 cardBorder">
						<div class="card-header" style="background-color: rgb(51,122,183);color: #fff;">
							教育背景
						</div>
						<table class="table text-center" style="border:1px solid rgb(51,122,183);">
							<tbody>
								<tr>
									<td>时间</td>
									<td>学校</td>
									<td>专业</td>
									<td>学历</td>
								</tr>
								<tr>
									<td>2020-2023</td>
									<td>泸州职业技术学院</td>
									<td>计算机应用技术</td>
									<td>大专</td>
								</tr>
								<tr>
									<td>2023-2025</td>
									<td>四川轻化工大学</td>
									<td>计算机科学与技术</td>
									<td>本科</td>
								</tr>
								<tr>
									<td>xxx</td>
									<td>xxx</td>
									<td>xxx</td>
									<td>xxx</td>
								</tr>
							</tbody>
						</table>
					</div>
					<!-- 教育背景结束 -->
				</div>
			</div>
		</div>
		<script src="./libs/bootStrap/js/jquery-3.6.0.js"></script>
		<script src="./libs/bootStrap/js/bootstrap.bundle.js"></script>
		<script src="./libs/bootStrap/js/bootstrap.js"></script>
	</body>
</html>
